<template>
  <view class="feedback-container">
    <view class="form-area">
      <u-form
        labelWidth="130"
        :model="formData"
        :rules="rules"
        ref="feedbackForm"
      >
        <u-form-item
          label="联系方式"
          prop="Contact"
          borderBottom
          required
          labelWidth="90"
        >
          <u-input
            v-model="formData.Contact"
            placeholder="请输入联系方式"
            placeholder-style="color: #999"
            :border="false"
          ></u-input>
        </u-form-item>
        <u-form-item
          label="反馈类型"
          prop="Type"
          borderBottom
          required
          labelWidth="90"
        >
          <u-radio-group v-model="formData.Type">
            <u-radio
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :name="item.value"
            ></u-radio>
          </u-radio-group>
        </u-form-item>

        <!-- 反馈内容 -->
        <u-form-item
          label="反馈内容"
          prop="Content"
          required
          label-position="top"
        >
          <div class="mt-10px">
            <u-textarea
              v-model="formData.Content"
              placeholder="请输入您的宝贵意见（200字以内）"
              count
              maxlength="200"
              height="200"
            ></u-textarea>
          </div>
        </u-form-item>

        <!-- 上传图片 -->
        <u-form-item v-if="0" label="相关截图（选填）" label-position="top">
          <div class="mt-10px">
            <u-upload
              :fileList="fileList"
              @afterRead="handleAfterRead"
              @delete="handleDelete"
              name="feedbackImages"
              multiple
              maxCount="3"
              previewFullImage
            ></u-upload>
          </div>
        </u-form-item>
      </u-form>
    </view>

    <!-- 按钮区域 -->
    <view class="bottom-box">
      <u-button
        type="warning"
        text="历史记录"
        @click="navigateToHistory"
        :customStyle="{ marginRight: '20rpx' }"
      ></u-button>
      <u-button
        type="primary"
        text="提交反馈"
        @click="handleSubmit"
        :loading="submitting"
      ></u-button>
    </view>
  </view>
</template>

<script lang="ts">
import { userStore } from '@/store'
import { Component, Vue } from 'vue-property-decorator'
import { postFeedBackApi } from './service'

interface IFormData {
  Contact: string | number
  Type: 'suggestion' | 'issue'
  Content: string
  images: string[]
}

@Component
export default class FeedBackPage extends Vue {
  feedbackForm: any = null
  get userInfo(): any {
    return userStore.userInfo || {}
  }

  // 表单数据
  formData: IFormData = {
    Contact: '',
    Type: 'suggestion',
    Content: '',
    images: []
  }

  // 文件列表
  fileList: any[] = []

  // 提交状态
  submitting = false

  // 反馈类型选项
  typeOptions = [
    { label: '功能建议', value: 'suggestion' },
    { label: '问题反馈', value: 'issue' }
  ]

  // 验证规则
  rules = {
    Contact: {
      type: 'string',
      required: true,
      message: '请输入联系方式',
      trigger: ['blur', 'change']
    },
    Content: {
      type: 'string',
      required: true,
      message: '请输入反馈内容',
      trigger: ['blur', 'change']
    }
  }

  // 图片上传处理
  handleAfterRead(event: any) {
    const { file } = event
    // 模拟上传过程
    this.fileList.push({
      url: file.url,
      status: 'uploading',
      message: '上传中...'
    })

    // 模拟上传完成
    setTimeout(() => {
      const index = this.fileList.findIndex((item) => item.url === file.url)
      this.fileList[index].status = 'success'
      this.fileList[index].message = '上传成功'
      this.formData.images.push(file.url)
    }, 1500)
  }

  // 删除图片
  handleDelete(event: any) {
    const { index } = event
    this.fileList.splice(index, 1)
    this.formData.images.splice(index, 1)
  }

  // 提交表单
  handleSubmit() {
    ;(this.$refs.feedbackForm as any)
      .validate()
      .then(async (valid: boolean) => {
        if (valid) {
          this.submitting = true

          try {
            await postFeedBackApi({
              ...this.formData,
              OfficerID: this.userInfo.OfficerID
            })

            uni.showToast({
              title: '提交成功',
              icon: 'success'
            })

            // 重置表单
            this.resetForm()
          } catch (error) {
            uni.showToast({
              title: '提交失败',
              icon: 'error'
            })
          } finally {
            this.submitting = false
          }
        }
      })
  }

  // 重置表单
  resetForm() {
    this.formData = {
      Contact: '',
      Type: 'suggestion',
      Content: '',
      images: []
    }
    this.fileList = []
  }

  // 跳转到历史记录
  navigateToHistory() {
    uni.navigateTo({
      url: '/pages/my-modules/feedback-history'
    })
  }
  onReady() {
    ;(this.$refs.feedbackForm as any).setRules(this.rules)
  }
}
</script>

<style lang="scss" scoped>
.feedback-container {
  padding: 20rpx;
  min-height: 100vh;
  background-color: #f5f5f5;

  .form-area {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
  }

  .button-group {
    padding: 0 20rpx;
  }
}
</style>
